<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定class样式</title>
    <style>
        .basic {
        / / 边框大小 border: 1 px solid red;
        }

        .happy {
            /*字体颜色*/
            color: green;
        }

        .sad {
            /*字体颜色*/
            color: red;
        }

        .normal {
            /*字体颜色*/
            color: blue;
        }

        /*    圆角*/
        .round {
            /*边框半径*/
            border-radius: 50%;
        }

        /*    加粗*/
        .bold {
            /*字体加粗*/
            font-weight: bold;
        }

        /*    斜体*/
        .italic {
            /*字体倾斜*/
            font-style: italic;
        }


    </style>
    <script src="../js/vue.js">

    </script>
</head>
<body>

<div id="root">
    <!--    第一种绑定样式的方法-->
    <div class="basic" :class="mood" @click="changeMood">点击切换心情</div>
    <!--    第二种绑定样式的方法 使用数组-->
    <div class="basic" :class="arr">
        点击切换心情
    </div>
    <!--    第三种绑定样式的方法 使用对象的方式-->
    <div class="basic" :class="classObj">
        点击切换心情
    </div>

    <!--    直接绑定style样式-->
    <div class="basic" :style="styleObj">
        点击切换心情
    </div>
 </div>
    <script type="text/javascript">
        Vue.config.printWarnings = false;
        const vm = new Vue({
            el: '#root',
            data: {
                mood: 'sad',
                arr: ['round', 'bold', 'italic'],
                classObj: {
                    round: false,
                    bold: false,
                    italic: false
                },
                styleObj: {
                    color: 'red',
                    fontSize: '20px',
                    backgroundColor: 'yellow'
                }

            },
            methods: {
                changeMood() {
                    const array = ['happy', 'sad', 'normal'];
                    const index = Math.floor(Math.random() * 3);
                    return this.mood = array[index];
                }
            }
        });

    </script>
</body>

</html>